import * as echarts from 'echarts';
import {LitElement, html, TemplateResult} from 'lit';
import {customElement, property} from "lit/decorators.js";
import style from '../echarts.css.ts';

export interface GaugeBarometerProps {
    chartId?: string;
    width?: string;
    height?: string;
    thick?: number;
    value?: number;
}

@customElement('lit-gauge-barometer')
export class LitGaugeBarometer extends LitElement {
    @property({type: String}) chartId: string = 'lit-gauge-barometer-chart';
    @property({type: String}) width: string = '800px';
    @property({type: String}) height: string = '600px';
    @property({type: Number}) thick: number = 1;
    @property({type: Number}) value: number = 0;

    getSeries(): any[] {
        return [
            {
                type: 'gauge',
                min: 0,
                max: 100,
                splitNumber: 10,
                radius: '80%',
                axisLine: {
                    lineStyle: {
                        color: [[1, '#f00']],
                        width: 3 * this.thick,
                    }
                },
                splitLine: {
                    distance: -18 * this.thick,
                    length: 18 * this.thick,
                    lineStyle: {
                        color: '#f00'
                    }
                },
                axisTick: {
                    distance: -12 * this.thick,
                    length: 10 * this.thick,
                    lineStyle: {
                        color: '#f00'
                    }
                },
                axisLabel: {
                    distance: -50 * this.thick,
                    color: '#f00',
                    fontSize: 25 * this.thick,
                },
                anchor: {
                    show: true,
                    size: 20 * this.thick,
                    itemStyle: {
                        borderColor: '#000',
                        borderWidth: 2 * this.thick,
                    }
                },
                pointer: {
                    offsetCenter: [0, '10%'],
                    icon: 'path://M2090.36389,615.30999 L2090.36389,615.30999 C2091.48372,615.30999 2092.40383,616.194028 2092.44859,617.312956 L2096.90698,728.755929 C2097.05155,732.369577 2094.2393,735.416212 2090.62566,735.56078 C2090.53845,735.564269 2090.45117,735.566014 2090.36389,735.566014 L2090.36389,735.566014 C2086.74736,735.566014 2083.81557,732.63423 2083.81557,729.017692 C2083.81557,728.930412 2083.81732,728.84314 2083.82081,728.755929 L2088.2792,617.312956 C2088.32396,616.194028 2089.24407,615.30999 2090.36389,615.30999 Z',
                    length: '115%',
                    itemStyle: {
                        color: '#000'
                    }
                },
                detail: {
                    valueAnimation: true,
                    precision: 1
                },
                title: {
                    offsetCenter: [0, '-50%']
                },
                data: [
                    {
                        value: this.value,
                        name: 'PLP'
                    }
                ]
            },
            {
                type: 'gauge',
                min: 0,
                max: 60,
                splitNumber: 6,
                axisLine: {
                    lineStyle: {
                        color: [[1, '#000']],
                        width: 3 * this.thick,
                    }
                },
                splitLine: {
                    distance: -3 * this.thick,
                    length: 18 * this.thick,
                    lineStyle: {
                        color: '#000'
                    }
                },
                axisTick: {
                    distance: 0,
                    length: 10 * this.thick,
                    lineStyle: {
                        color: '#000'
                    }
                },
                axisLabel: {
                    distance: 10 * this.thick,
                    fontSize: 25 * this.thick,
                    color: '#000'
                },
                pointer: {
                    show: false
                },
                title: {
                    show: false
                },
                anchor: {
                    show: true,
                    size: 14 * this.thick,
                    itemStyle: {
                        color: '#000'
                    }
                }
            }
        ]
    }

    option: echarts.EChartsOption = {
        series: this.getSeries()
    };

    static styles = style;

    updated(): void {
        this.option.series = this.getSeries();
        this.firstUpdated();
    }

    firstUpdated() {
        const chart = echarts.init(this.shadowRoot!.getElementById(this.chartId)!);
        chart.setOption(this.option);
    }

    render(): TemplateResult {
        return html`<div id="${this.chartId}" style="width: ${this.width}; height: ${this.height};"></div>`;
    }
}

declare global {
    interface HTMLElementTagNameMap {
        'lit-gauge-barometer': LitGaugeBarometer;
    }
}